<template name="components">
	<view>
		<view class="head_img_top">
			<u-navbar :is-back="false" :border-bottom="false" background="transparent"></u-navbar>
			<view class="user_info_box" @click="goUser()">
				<view class="cu-avatar xl round margin-xs" :style="{backgroundImage:'url('+(cover==''||cover==null?'/static/touxiang.png':cover)+')'}"></view>
				<view class="username">
					<view class="v1">
						<view class="v3">{{nickName | formname}}</view>
						<view v-if="hasLogin" class="v4">{{userLevel}} | {{vipType}}</view>
					</view>
					<view class="v2">{{telephone | formnumber}}</view>
				</view>
				<image src="../../static/rt_icon.png" class="rt_icon" mode="widthFix" ></image>
			</view>
			<image src="../../static/my_bg.png" mode="widthFix" class="head_bg_img"></image>
		</view>
		<view class="nav_row1">
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(item,index) in row1" @click="goPage(item.type)">
					<image :src="item.image" mode="widthFix" class="nav_icon"></image>
					<view class="grid-text">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="nav_row2">
			<view class="title">我的服务</view>
			<view class="paddingkz">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in row2" @click="goPage(item.type)">
						<image :src="item.image" mode="widthFix" class="nav_icon"></image>
						<view class="grid-text">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="border"></view>
			<view class="paddingkz">
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in row3" @click="goPage(item.type)">
						<image :src="item.image" mode="widthFix" class="nav_icon"></image>
						<view class="grid-text">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- <view  @click="zhuce()">
				注册
			</view> -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'scene', 'openid'])
		},
	    data() {
	        return {
				imgLists : [],
				canAdd : true,
				uploadFilePath : '',
				nickName: '',
				realName: '',
				telephone: '',
				address: '',
				remark: '',
				cover: '',
				integralCount: 0,
				userLevel: '',
				vipType: '',
				row1: [
					{
						title: '钱包',
						image:'../../static/icon/row1_01.png',
						type:'qb'
					},
					{
						title: '积分介绍',
						image:'../../static/icon/row1_02.png',
						type:'jfjs'
					},
					{
						title: '排行',
						image:'../../static/icon/row1_03.png',
						type:'phlist'
					},
					{
						title: '用户权益',
						image:'../../static/icon/row1_04.png',
						type:'yhqy'
					}
				],
				row2: [
					{
						title: '我的积分',
						image:'../../static/icon/row2_01.png',
						type:'wdjf'
					},
					{
						title: '海报推广',
						image:'../../static/icon/row2_02.png',
						type:'hbtg'
					},
					{
						title: '软文推广',
						image:'../../static/icon/row2_03.png',
						type:'rwtg'
					},
					{
						title: '二维码',
						image:'../../static/icon/row2_04.png',
						type:'ewm'
					}
				],
				row3:[
					{
						title: '我的地址',
						image:'../../static/icon/row2_05.png',
						type:'wddz'
					},
					{
						title: '联系客服',
						image:'../../static/icon/row2_06.png',
						type:'lxkf'
					},
					{
						title: '我的收藏',
						image:'../../static/icon/row2_07.png',
						type:'wdsc'
					},
					{
						title: '设置',
						image:'../../static/icon/row2_08.png',
						type:'wdsz'
					}
				]
	        }
	    },
		onShow() {
			this.getMember('');
		},
		onLoad(){
			_self = this;
			this.getMember('card');
		},
		filters:{
			formname(data){
				if(data != ""){
					return data
				}else{
					return '暂未登录'
				}
			},
			formnumber(data){
				if(data != ""){
					return data.substr(0,3)+'****'+data.substr(7);
				}
			}
		},
		methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setScene']),
			getMember : function(t){
				if(!this.hasLogin){
					return;
				}
			    uni.request({
			    	url: this.serverUrl + 'app/getMember',
			    	header: {
			    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
			    	},
			    	method: 'POST',
			    	data: {
						id: this.userInfo.id,
			    	},
			    	success: (r) => {
						console.log(r.data)
						//console.log(r)
			    		if (r.data.code==0) {
							if(t==''){
								console.log(r.data)
								this.cover=r.data.data.cover;
								this.nickName=r.data.data.nickName;
								this.realName=r.data.data.realName;
								this.telephone=r.data.data.telephone;
								this.address=r.data.data.address;
								this.remark=r.data.data.remark;
								this.integralCount=r.data.data.integralCount;
								var ulevel = '';
								if(r.data.data.userLevel==null || r.data.data.userLevel==''){
									ulevel = '普通会员';
								}else if(r.data.data.userLevel=='M1'){
									ulevel = 'M1总监';
								}else{
									ulevel = r.data.data.userLevel+'经理';
								}
								this.userLevel=ulevel;
								var uVip = '';
								if(r.data.data.vipType=='1'){
									uVip = '普通用户';
								}else if(r.data.data.vipType=='2'){
									uVip = '会员用户';
								}else if(r.data.data.vipType=='3'){
									uVip = 'VIP用户';
								}
								this.vipType=uVip;
							}
						}
					}
				})
			},
			goUser(){
				if(this.hasLogin){
					uni.navigateTo({
						url:'/pageB/component/usercenter',
						// url:'/pages/component/userinfo?scene='+this.scene
					})
				}else{
					uni.navigateTo({
						url:'/pageB/component/userinfo?scene='+this.scene
					})
				}
				
			},
			editImage(){
				uni.navigateTo({
					url:'/pageB/general/edit-image/edit-image'
				})
			},
			goPage(type){
				if(!this.hasLogin){
					uni.showToast({
						icon:"none",
						title:"请先注册"
					})
					return;
				}
				if(type=='qb'){
					// 我的钱包
					uni.navigateTo({
						url:'/newpage/mywallet'
					})
				}else if(type=='jfjs'){
					// 积分介绍
					uni.navigateTo({
						url:'/pageB/component/info'
					})
				}else if(type=='yhqy'){
					// 用户权益
					uni.navigateTo({
						url:'/newpage/interests/interests'
					})
				}else if(type=='wdjf'){
					// 我的积分
					uni.navigateTo({
						url:'/pageB/component/jifenlist'
					})
				}else if(type=='hbtg'){
					// 海报推广
					uni.navigateTo({
						url:'/pageB/poster/poster-select/poster-select'
					})
				}else if(type=='ewm'){
					// 二维码
					uni.navigateTo({
						url:'/pageB/component/erweima'
					})
				}else if(type=='wddz'){
					// 我的地址
					uni.navigateTo({
						url:'/newpage/address/index'
					})
				}else if(type=='lxkf'){
					// 意见反馈
					uni.navigateTo({
						url:'/newpage/feedback'
					})
				}else if(type=='wdsc'){
					// 意见反馈
					uni.navigateTo({
						url:'/newpage/collection/index'
					})
				} else if(type=='wdsz'){
					// 我的设置
					uni.navigateTo({
						url:'/pageB/component/usercenter'
					})
				} else{
					//暂未开放提示
					this.$refs.uToast.show({
						title: '功能升级中',
						type: 'default'
					})
				}
			},
			zhuce(){
				uni.navigateTo({
					url:'/pageB/component/userinfo'
				})
			}
		} 
	}
</script>

<style lang="less">
	page{
		background-color: #f3f3f3;
	}
	.head_img_top{
		height: 340rpx;
		position:relative;
		.head_bg_img{
			width: 100%;
			position: absolute;
			top: 0px;
		}
		.user_info_box{
			position:relative;
			z-index: 1;
			display: flex;
			flex-direction: row;
			color: #FFFFFF;
			padding: 0px 30rpx;
			align-items: center;
			justify-content: space-between;
			.username{
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				.v1{
					display: flex;
					margin-bottom: 20rpx;
					justify-content: space-between;
					padding-right: 10rpx;
				}
				.v2{
					font-size: 24rpx;
				}
				.v3{
					font-size: 32rpx;
				}
				.v4{
					display: inline-block;
					background-color: #30c17c;
					padding: 2rpx 10rpx;
					font-size: 24rpx;
					border-radius: 30rpx;
					// margin-left: 70rpx;
				}
			}
			.rt_icon{
				width: 13rpx;
				margin-right: 30rpx;
			}
		}
	}
	.nav_row1{
		padding: 0rpx 15rpx;
		margin: 20rpx 0rpx;
		background-color: #FFFFFF;
		.grid-text{
			color: #565656;
			font-size: 24rpx;
		}
	}
	.nav_icon{
		width: 50rpx;
		margin-bottom: 20rpx;
	}
	.nav_row2{
		background-color: #FFFFFF;
		.title{
			height: 100rpx;
			line-height: 100rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #dddddd;
			margin: 0rpx 30rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.border{
		margin: 0rpx 30rpx;
		border-bottom: 1rpx solid #dddddd;
	}
	.paddingkz{
		padding: 0rpx 30rpx;
	}
</style>
